<script lang="ts" setup>
import { ref } from 'vue'

// ref 包装后，会返回一个 ref 对象，初始化的数据被保存在 ref 对象的 value 属性中
const totalCount = ref(100)

console.log(totalCount) // ref 对象

const addCount = () => {
  // 修改 ref 对象的 .value 属性值，自动更新视图
  totalCount.value++
}

const decreaseCount = () => {
  totalCount.value--
}
</script>

<template>
  <button @click="addCount()">+</button>
  <!-- 注意：template 会直接渲染 ref 数据，【不能】写 .value -->
  <span>{{ totalCount }}</span>
  <button @click="decreaseCount()">-</button>
</template>
